<template>
  <div>
    <section>
      <el-form
        ref="form"
        :model="queryForm"
        label-width="61px"
        :inline="true"
        class="queryForm adjustCondition"
      >
        <el-form-item label="关键字:">
          <el-input
            v-model="queryForm.keyWord"
            size="small"
            placeholder="请输入供应商名称/业务编号查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="生效时间:" label-width="75px">
 <!--         <el-date-picker
            v-model="queryForm.date"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker> -->
          <TimeSelect   @getTime="getTime1" :startTime="value3" :endTime="value4"></TimeSelect>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button
              type="primary"
              size="small"
              class="search-btn"
              @click="
                getList(
                  2,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date
                )
              "
            >查询
            </el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <div>
      <section class="right-but" style="display:flex;margin-bottom:10px">
        <el-button type="text" style="margin-right:-13px;cursor:pointer;" @click="getList(
                  2,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date
                )">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
        </el-button>
        <PopoverBut :checkedProps="checkedProps" style="" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>

      </section>
    </div>

    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%;"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="codes" label="业务编号"  min-width="210">
          <template slot-scope="scope">
              <el-link type="primary" :underline="false" v-if="hasPermission('busin:product:edit')" @click="handleCommand($event, scope.row)">{{scope.row.codes}}</el-link>
              <span v-else>{{scope.row.codes}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="companyName" label="供应商名称" min-width="200"></el-table-column>
      <el-table-column prop="productName" label="原料名称" min-width="105"></el-table-column>
      <el-table-column prop="price" label="调整后价格" min-width="120" align="right">
		  <template slot-scope="scope">
		      {{ scope.row.price | thousandSep}}
		  </template>
	  </el-table-column>
      <el-table-column prop="effectTime" label="开始执行时间" min-width="200"></el-table-column>
      <el-table-column prop="address" label="操作" width="128">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="edit(scope.row)"
            v-if="hasPermission('busin:product:edit')"
          >修改
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            @click="del(scope.row.id,scope.row.state)"
            v-if="hasPermission('busin:product:edit')"
          >删除
          </el-link>
<!--            <el-link type="primary" :underline="false" v-if="hasPermission('busin:product:edit')" @click="handleCommand($event, scope.row)">详情</el-link>-->
<!--          <el-dropdown @command="handleCommand($event, scope.row)">-->
<!--            <el-link type="primary" :underline="false" v-if="hasPermission('busin:product:edit')">详情<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></el-link>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <span v-if="scope.row.procInsId">-->
<!--                <el-dropdown-item command="b">有审批详情</el-dropdown-item>-->
<!--              </span>-->
<!--              <span v-else>-->
<!--                <el-dropdown-item command="a">无审批详情</el-dropdown-item>-->
<!--              </span>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->

          <!--          <span style="padding-right: 20px"></span>-->
          <!--          <el-link v-if="hasPermission('company:productCredit:delete')"-->
          <!--            type="primary"-->
          <!--            :underline="false"-->
          <!--            @click="delCrm(scope.row.id)"-->
          <!--          >删除-->
          <!--          </el-link-->
          <!--          >-->
        </template>
      </el-table-column>
      <span>
        <el-table-column
          prop="state"
          label="状态"
          sortable="custom"
          min-width="190px"
        >
          <template slot-scope="scope">
            <div v-if="JSON.stringify(scope.row.flowState) === '{}'">
              <div class="state invalid" v-if="scope.row.state === -1 || scope.row.state === 4" type="warning"><span></span>{{
                  $dictUtils.getDictLabel("busState", scope.row.state, "")
                }}</div>
              <div class="state empty" v-if="scope.row.state === 1 || scope.row.state === 3" type="info"><span></span>{{
                  $dictUtils.getDictLabel("busState", scope.row.state, "")
                }}</div>
              <div class="state process" v-if="scope.row.state === 2"><span></span>{{
                  $dictUtils.getDictLabel("busState", scope.row.state, "")
                }}</div>
<!--              <div-->
<!--                v-if="scope.row.state === 3 || scope.row.state === 4"-->
<!--                type="danger"-->
<!--                class="state"-->
<!--              >{{ $dictUtils.getDictLabel("busState", scope.row.state, "") }}-->
<!--              </div>-->
              <div class="state normal" v-if="scope.row.state === 100" type="success"><span></span>{{
                  $dictUtils.getDictLabel("busState", scope.row.state, "")
                }}</div>
            </div>
            <div v-else>
              <div
                v-if="
                  scope.row.flowState.code === 0 ||
                  scope.row.flowState.code === 3 ||
                  scope.row.flowState.code === 4 ||
                  scope.row.flowState.code === 5
                "
                type="danger"
                class="state process"
              ><span></span>{{ scope.row.flowState.status }}</div>
              <span v-if="scope.row.flowState.deleteReason"></span>
              <div class="state process" v-if="scope.row.flowState.code === 2"
              ><span></span>{{ scope.row.flowState.status }} [{{
                  scope.row.flowState.currentTask.name
                }}]</div>
              <div class="state process" v-if="scope.row.flowState.code === 100"><span></span>{{
                  scope.row.flowState.status
                }}</div>
            </div>
          </template>
        </el-table-column>
      </span>
      <span v-for="(item,index) in checkedProps" :key="index">
         <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
      </span>


    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <EditForm
      ref="EditForm"
      @refreshDataList="getList(2, page, orderBy.name, orderBy.method)"
    ></EditForm>
    <TaskForm flowTitle="采购调价详情" v-if="" :procInsId="procInsId" ref="TaskForm" :businessType="businessType"></TaskForm>
  </div>
</template>
<script>
  import { getList ,businessProductDelete} from "@/api/business/business.js";
  import EditForm from "./yetEditForm.vue";
  import PopoverBut from "@/components/button/popoverBut";
  import TaskForm from "@/components/flow/TaskForm";
  import pick from "lodash.pick";

  const options1 = [];
  const cityOptions = ["上海", "北京"];
  export default {
    components: {
      EditForm,
      PopoverBut,
      TaskForm,
    },

    data() {
      return {
        businessType: 2,
        flow1: {
          id: "e951932e-39ea-11eb-bb1e-3ae0fb62fce6",
          formType: "2",
          formReadOnly: false,
          procInsId: "e950f6e5-39ea-11eb-bb1e-3ae0fb62fce6",
          procDefId: "businessProductApprove:1:fd8b0efc-3939-11eb-a07b-e24460a369f9",
          procDefKey: "businessProductApprove",
          businessTable: "t_business_product",
          businessId: "775731122880524288",
          isNextGatewaty: false,
          formUrl: "/flowable/editForm/BusinessProductEditForm",
          procDefName: "",
          durationTime: "",
          todoTask: true,
          finishTask: true,
          startTask: false,
        },
        value3:'',
        value4:'',
        detailsVisible: false,
        procInsId: "",
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        checkedProps: options1,
        ShowCloum: { createDate: '' },
        options: [
          { label: '创建人', key: 'createBy.loginName' },
          { label: '创建时间', key: 'createDate' },
          { label: '上次操作人', key: 'updateBy.loginName' },
          { label: '上次操作时间', key: 'updateDate' }

        ],
        tableData: [],
        orderBy: {
          name: 'effect_time',
          method: 'desc'
        },
        loading: false,
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        queryForm: {
          checkedCities: 0
        },
        checkedCities: [],
        cities: cityOptions
      }
    },
    methods: {
// 删除价格策略
      del (ids, state) {
        if (state === 2) {
          this.$notify.error({
            title: '错误',
            message: '审批中，不允许删除！'
          });
        } else if (state === -1) {
          this.$notify.error({
            title: '错误',
            message: '已提交的数据不允许删除！'
          });
        } else if (state === 100) {
          this.$notify.error({
            title: '错误',
            message: '已生效，不允许删除！'
          });
        } else if (state === 1) {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            businessProductDelete ({
              ids: ids
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '已删除!'
                })
                this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
              }
            })
          });
        }

      },
      getTime1(e){
        this.value3=e.startTime;
        this.value4=e.endTime;
      },
        // 详情
        handleCommand(command, row) {
            console.log(row);
            console.log(command);
            if (row.procInsId) { // 有审批流程
                this.details(row);
            } else { // 无审批流程
                let editForm = {};
                editForm.id = row.id;
                editForm.flowStateus = row.flowState.code;
                if (row.flowState.currentTask) {
                    editForm.taskKey = row.flowState.currentTask.taskDefinitionKey;
                }
                editForm.companyName = row.companyName;
                editForm.payMode = row.payMode;
                editForm.newPrice = row.price;
                editForm.productName = row.productName;
                editForm.codes = row.codes;
                editForm.effectTime = row.effectTime;
                console.log(row);
                this.$refs.EditForm.init('info', editForm);
            }
        },
      // 调价详情
      details(row) {
        console.log(11);
        console.log(row);
        this.$refs.TaskForm.detailsVisible = true;
        this.procInsId = row.procInsId;
      },
      // 获取列表带分页
      getList(processType, params, orderName, orderByAORC, keyWord, date) {
        this.loading = true;
        getList({
          processType: processType,
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: orderName,
          orderByAORC: orderByAORC,
          keyWord: keyWord,
          effectTime: this.value3,
          effectEndTime: this.value4,
        }).then((res) => {
          if (res.data.code === "200") {
            for (let i = 0; i < res.data.result.list.length; i++) {
              if (!res.data.result.list[i].flowState) {
                let flowState = {};
                this.$set(res.data.result.list[i], "flowState", flowState);
              }
            }
            this.tableData = res.data.result.list;
            console.log(2123);
            console.log(this.tableData);
            this.page.total = res.data.result.count;
          }
          this.loading = false;
        });
      },
      // 编辑
      edit(row) {
        let editForm = {};
        editForm.id = row.id;
        editForm.flowStateus = row.flowState.code;
        if (row.flowState.currentTask) {
          editForm.taskKey = row.flowState.currentTask.taskDefinitionKey;
        }
        editForm.companyName = row.companyName;
        editForm.payMode = row.payMode;
        editForm.newPrice = row.price;
        editForm.productName = row.productName;
        editForm.codes = row.codes;
        editForm.effectTime = row.effectTime;
        console.log(row);
        this.$refs.EditForm.init('edit',editForm);
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e;
        // console.log(e)
      },
      // 重置查询条件
      reset() {
        this.queryForm = {};
        this.value3=''
        this.value4=''
          this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
      },
      // 排序
      sortthiscolumn(a) {
        this.orderBy.name = a.prop;
        this.page.pageNo = 1;
        if (a.order === "ascending") {
          this.orderBy.method = "asc";
        } else {
          this.orderBy.method = "desc";
        }
        this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
      },
      handleSizeChange(e) {
        this.page.pageSize=e
        this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
      },
      handleCurrentChange(e) {
        this.page.pageNo = e;
        this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
        console.log(e);
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return "warning-row";
        } else {
          return "success-row";
        }
      }
    },
    mounted() {
      // this.tableData = [{ names: '1' }]
      this.getList(2, this.page, this.orderBy.name, this.orderBy.method);
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 230px;
  }

  .queryForm {
    .el-form-item{
      margin-right: 50px;
    }
    ::v-deep .el-input.el-input--small{
      .el-input__inner{
        width: 240px;
      }
    }
  }

  .right-but {
    float: right;
    margin-right: 10px;
    margin-top: -20px;
  }
  ::v-deep .el-table{
    .detail{
      margin-right: 40px;
      .el-link--inner{
        margin-right: 0 !important;
      }
    }
  }
</style>
